<template>
    <fc-designer ref="designer" @save="handleSave" submitBtn :config="state.config" height="100vh" />
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted, } from 'vue';
import { useRoute } from 'vue-router';
import { ElMessageBox, ElMessage } from 'element-plus';
import { add, update, get } from "@/api/public/basic";


const listId = 'hQyTUtB5WjC' // 页面表id
// 可以在此处获取设计器实例或进行其他操作
const designer = ref(null);
const route = useRoute();


const state = reactive({
    config: {
        // 显示保存按钮
        showSaveBtn: true,
        //控制字段ID输入框能否输入
        fieldReadonly: false
    },
    ruleJson: undefined, // 表单生成规则
    optionsJson: undefined, // 表单配置
    title: '',// 页面标题
    pageId: '',
});

const handleSave = async () => {
    // 再次打开弹窗回显state.title
    const formName = await ElMessageBox.prompt('', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPlaceholder: '请输入页面标题',
        inputValue: state.title
        // inputPattern: /^[a-zA-Z0-9_]+$/,
        // inputErrorMessage: '只能包含字母、数字和下划线',
    });

    if (formName.value) {
        state.title = formName.value;
        state.ruleJson = designer.value.getJson();
        state.optionsJson = designer.value.getOptionsJson();

        // 保存数据
        const data = {
            title: state.title,
            contentType: 'template',
            template: `{"rule": ${state.ruleJson},"options": ${state.optionsJson}}`,
        };


        if (state.pageId) {
            // 修改
            update(state.pageId, data, listId).then((response) => {
                if (response.code == 200) {
                    ElMessage({
                        message: '保存成功',
                        type: 'success',
                        plain: true,
                    })
                } else {
                    ElMessage.error(response.msg);
                }
            });
        } else {
            add(data, listId).then((response) => {
                if (response.code == 200) {
                    ElMessage.success('保存成功');
                    state.pageId = response.data;
                    // 将state.pageId存入localstorage
                    localStorage.setItem('pageId', state.pageId);
                } else {
                    ElMessage.error(response.msg);
                }
            });
        }
    }
};

onMounted(() => {
    // 获取路由参数
    state.pageId = route.query.pageId || localStorage.getItem('pageId');
    if (state.pageId) {
        // 获取页面数据
        get(state.pageId, listId).then((response) => {
            if (response.code == 200) {
                const data = response.data && response.data[0];

                state.title = data.title;

                if (data.template) {
                    const templateParse = JSON.parse(data.template);
                    state.ruleJson = templateParse.rule;
                    state.optionsJson = templateParse.options;
                    designer.value.setOptions(state.optionsJson);
                    designer.value.setRule(state.ruleJson);
                }
            } else {
                ElMessage.error(response.msg);
            }
        });
        // 将state.pageId存入localstorage
        localStorage.setItem('pageId', state.pageId);
    }
})

onUnmounted(() => {
    // 页面卸载时清除localstorage中的pageId
    localStorage.removeItem('pageId')
})

</script>